<template>
	<view class="flex flex-direction page">
		<view class="flex-sub map-box bg-white">
			<!--  -->
			<map id="mapNvgt" style="width: 100%;height: calc(100% - 10px)" :show-location="true" :latitude="latitude"
				:longitude="longitude" :markers="covers" :circles="circles">
			</map>
			<view class="cur-position" @click="handleClick">
				<text class="cuIcon-radiobox"></text>
			</view>
		</view>
		<view class="padding bg-white bottom-box">
			<view class="padding-tb solid-bottom">
				<view class="text-lg text-black">
					我的位置
				</view>
				<view class="text-gray">
					{{address}}
				</view>
			</view>
			<view class="flex align-center justify-between padding-tb">
				<text class="text-lg">拍照</text>
				<view class="text-xxl">
					<!-- <text class="cuIcon-cameraaddfill"></text> -->
					<ImageUpload uploadText="拍照上传" :maxCount="1" v-model="signImage" />
				</view>
			</view>

			<view class="flex">
				<button class="cu-btn bg-main lg flex-sub" @click="submit">签到</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ImageUpload from '@/components/imageUpload/index.vue'

	let mapContext
	export default {
		components: {
			ImageUpload
		},
		data() {
			return {
				frozenReason: '', 
				latitude: 39.909,
				longitude: 116.39742,
				// latitudeCen: 39.909,
				// longitudeCen: 116.39742,
				covers: [
					// 	{
					// 	latitude: 39.909,
					// 	longitude: 116.39742,
					// 	// iconPath: '../../../static/location.png'
					// }, 
					// {
					// 	latitude: 39.90,
					// 	longitude: 116.39,
					// 	// iconPath: '../../../static/location.png'
					// },
				],
				circles: [
					// 	{
					// 	latitude: 22.7399,
					// 	longitude: 108.375,
					// 	color: '#006BFE',
					// 	fillColor: '#8dbdff66',
					// 	radius: 260
					// },
				],
				signImage: '',
				address: '',
				disabled: true,
				id: '',
				orderLogId: ''
			};
		},
		onLoad(data) {
			// console.log('onLoad', data)
			this.address = this.$hd.position.addr
			this.id = data.id
			this.orderLogId = data.orderLogId
			this.latitude = data.lat
			this.longitude = data.lng
			this.frozenReason = data.frozenReason || ''
			// this.latitudeCen = data.lat
			// this.longitudeCen = data.lng
			this.circles = [{
				latitude: data.lat,
				longitude: data.lng,
				color: '#006BFE',
				fillColor: '#8dbdff66',
				radius: 200
			}]
			this.covers = [{
				id: 99,
				latitude: data.lat,
				longitude: data.lng,
				width: 20,
				height: 30
			}]

			const dis = this.distance(this.$hd.position.lat, this.$hd.position.lng, data.lat, data.lng)
			if (dis > 1) {
				this.disabled = true
			} else {
				this.disabled = false
			}
		},
		onReady() {
			mapContext = uni.createMapContext('mapNvgt', this)
		},
		methods: {
			handleClick() {
				const that = this
				uni.getLocation({
					isHighAccuracy: true,
					altitude: true,
					type: 'gcj02',
					success(res) {
						// console.log(res)
						// that.latitudeCen = res.latitude
						// that.longitudeCen = res.longitude
						that.$hd.position.lat = res.latitude
						that.$hd.position.lng = res.longitude
						mapContext.moveToLocation({
							longitude: res.longitude,
							latitude: res.latitude
						})
						const dis = that.distance(res.latitude, res.longitude, that.latitude, that.longitude)
						if (dis > 1) {
							that.disabled = true
						} else {
							that.disabled = false
						}
					}
				})
			},
			submit() {
				if (this.frozenReason && this.frozenReason.toString().trim() !== '') {
					uni.showModal({
					title: '提示',
					content: '当前订单已被冻结，暂不支持此操作',
					showCancel: false,
					confirmText: '知道了'
					})
					return
				}
				const that = this
				// if (this.disabled) {
				if (false) {
					uni.showModal({
						title: '提示',
						content: '未在签到范围！',
						showCancel: false,
						confirmText: '知道了',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								that.handleClick()
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					if (!this.signImage) {
						uni.showToast({
							title: '请拍照现场图上传！',
							icon: "none"
						})
						return
					} else {
						uni.showLoading()
						this.$http.post('/cadre/assignOrder/allocation', {
							id: this.id,
							orderLogId: this.orderLogId,
							status: 3,
							lng: this.$hd.position.lng,
							lat: this.$hd.position.lat,
							signImage: this.signImage
						}).then(res => {
							uni.hideLoading()
							if (res.code == 200) {
								uni.navigateBack()
							} else {
									uni.showToast({
									icon: 'error',
									title: res.msg
								})
							}
						})
					}
				}
			},
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
	}

	.map-box {
		position: relative;

		.cur-position {
			position: absolute;
			bottom: 50px;
			left: 20px;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 28px;
			color: $uni-color-primary;
			border-radius: 20px;
			background: #fff;
		}
	}

	.bottom-box {
		height: 260px;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}
</style>